.shooting_star {
  position: absolute;
  height: 0.125rem;
  background: linear-gradient(-45deg, var(--theme-color), rgba(0, 0, 255, 0));
  border-radius: 62rem;
  filter: drop-shadow(0 0 0.375rem var(--theme-color));
  animation: tail 10000ms ease-in-out infinite, shooting 10000ms ease-in-out infinite;
}
.shooting_star::before,
.shooting_star::after {
  content: '';
  position: absolute;
  right: 0;
  height: 0.125rem;
  background: linear-gradient(-45deg, rgba(0, 0, 255, 0), var(--theme-color), rgba(0, 0, 255, 0));
  transform: translateX(50%) rotateZ(45deg);
  border-radius: 100%;
  animation: shining 10000ms ease-in-out infinite;
}
.shooting_star::after {
  transform: translateX(50%) rotateZ(-45deg);
}
.shooting_star:nth-child(1) {
  top: calc(50% - 6rem);
  left: calc(20% - 10rem);
}
.shooting_star:nth-child(1),
.shooting_star:nth-child(1)::before,
.shooting_star:nth-child(1)::after {
  animation-delay: 1000ms;
}
.shooting_star:nth-child(2) {
  top: calc(50% - 2rem);
  left: calc(20% - 4rem);
}
.shooting_star:nth-child(2),
.shooting_star:nth-child(2)::before,
.shooting_star:nth-child(2)::after {
  animation-delay: 3000ms;
}
.shooting_star:nth-child(3) {
  top: calc(50% - 8rem);
  left: calc(20% - 12rem);
}
.shooting_star:nth-child(3),
.shooting_star:nth-child(3)::before,
.shooting_star:nth-child(3)::after {
  animation-delay: 5000ms;
}

.shooting_star:nth-child(4) {
  top: calc(50% - 1rem);
  left: calc(20% - 15rem);
}
.shooting_star:nth-child(4),
.shooting_star:nth-child(4)::before,
.shooting_star:nth-child(4)::after {
  animation-delay: 7000ms;
}

@keyframes tail {
  0% {
    width: 0;
  }
  20% {
    width: 6.25rem;
  }
  60% {
    width: 0;
  }
  100% {
    width: 0;
  }
}

@keyframes shining {
  0% {
    width: 0;
  }
  30% {
    width: 1.875rem;
  }
  60% {
    width: 0;
  }
  100% {
    width: 0;
  }
}

@keyframes shooting {
  0% {
    transform: translateX(0);
  }
  60% {
    transform: translateX(18.75rem);
  }
  100% {
    transform: translateX(18.75rem);
  }
}
